<template>
  <div class="lineChart" :id="id"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    id: String,
    // 标题
    title: String,
    // 数据
    lineData: {
      type: Array,
      default: () => []
    },
    // 是否图例数据
    isLegendShow: {
      type: Boolean,
      default: true
    },
    // y图例数据
    yTextData: {
      type: Array,
      default: () => []
    },
    // 是否显示表情
    isEmoteShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      colors: [],
    };
  },
  methods: {
    draw_line() {
      const that = this
      let seriesArr = []
      that.lineData.forEach((item, index) => {
        that.colors.push(item.color)
        seriesArr.push({
          name: item.name,
          type: 'line',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: {
            color: item.color
          },
          label: {
            show: false
          },
          itemStyle: {
            color: item.lineBGColor,
            borderColor: item.lineBGColor,
            borderWidth: 3
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: item.lineBGColor,
                  },
                  {
                    offset: 1,
                    color: 'rgba(155, 155, 226, 0)',
                  },
                ],
                false
              ),
              shadowColor: item.lineBGColor,
              shadowBlur: 20,
            },
          },
          data: item.data,
        })
      })
      // console.log(seriesArr)
      let charts = echarts.init(document.getElementById(this.id));
      charts.setOption({
        title: {
          text: that.title,
          left: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
            color: '#CCCCCC'
          },
        },
        legend: {
          show: that.isLegendShow,
          top: 10,
          right: 30,
          icon: 'roundRect',
          itemWidth: 10,
          itemHeight: 8,
          selectedMode: false, //不允许点击图例
          itemGap: 15,
          textStyle: {
            fontFamily: 'MicrosoftYaHei',
            fontSize: 14,
            color: 'rgba(255, 255, 255, 1)'
          },
          data: that.legendData
        },
        grid: {
          top: '20%',
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: 'rgba(113, 113, 113, 1)',
            },
          },
          borderColor: 'transparent',
          formatter: function(params) {
            let colors = that.colors
            let returnData = '<div style="padding: 5px 10px;">'
            returnData += '<span style="font-family: MicrosoftYaHei; font-size: 14px; color: rgba(210, 221, 249, 1);">' + params[0].axisValue + '</span><br/>'
            for (let i = 0; i < params.length; i++) {
              returnData += '<span style="display:inline-block; width:10px; height:8px; margin-right:5px; border-radius:1px; background-color:' + colors[i] + '"></span>'
              returnData += '<span style="font-family: MicrosoftYaHei; font-size: 14px; color: ' + colors[i] + '">' + params[i].seriesName + '：</span><span style="font-family: Verdana; font-size: 14px; color: ' + colors[i] + '">' + params[i].value + '</span><span style="display:inline-block; margin-left: 4px; line-height: 10px; font-family: MicrosoftYaHei; font-size: 12px; color: ' + colors[i] + '"></span><br/>'
            }
            returnData += '</div>'
            return returnData
          }
        },
        xAxis: {
          type: 'value',
          min: 5,
          max: 40,
          axisLine: {
            show: true,
            // x底部的坐标线
            lineStyle: {
              color: '#6B7997',
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            formatter: '{value} 分钟',
            fontFamily: 'MicrosoftYaHei',
            fontSize: 12,
            color: '#CCCCCC',
          },
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          interval: 5,
        },
        yAxis: {
          type: 'value',
          name: '时长（分钟）',
          nameTextStyle: {
            fontFamily: 'MicrosoftYaHei',
            fontSize: 12,
            color: '#CCCCCC',
          },
          min: 0,
          axisLine: {
            show: true,
            // y底部的坐标线
            lineStyle: {
              color: '#6B7997',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 背景的线
              color: '#2C4166',
            },
          },
          axisLabel: {
            show: true,
            margin: 20,
            // y的字体颜色
            textStyle: {
              fontFamily: 'MicrosoftYaHei',
              fontSize: 12,
              color: '#CCCCCC',
            },
            formatter: function(value, index) {
              let result = that.yTextData.find((item, idx) => value === idx) || '';
              return that.isEmoteShow ? '{' + index + '| }' + ' ' + result : result;
            },
            rich: {
              0: {
                height: 20,
                align: 'center',
                backgroundColor: {
                  image: require('../../../assets/images/teach_ai/fennui.png')
                }
              },
              1: {
                height: 20,
                align: 'center',
                backgroundColor: {
                  image: require('../../../assets/images/teach_ai/yanwu.png')
                }
              },
              2: {
                height: 20,
                align: 'center',
                backgroundColor: {
                  image: require('../../../assets/images/teach_ai/koju.png')
                }
              },
              3: {
                height: 20,
                align: 'center',
                backgroundColor: {
                  image: require('../../../assets/images/teach_ai/kuaile.png')
                }
              },
              4: {
                height: 20,
                align: 'center',
                backgroundColor: {
                  image: require('../../../assets/images/teach_ai/zhongxing.png')
                }
              },
              5: {
                height: 20,
                align: 'center',
                backgroundColor: {
                  image: require('../../../assets/images/teach_ai/beishang.png')
                }
              },
              6: {
                height: 20,
                align: 'center',
                backgroundColor: {
                  image: require('../../../assets/images/teach_ai/jixi.png')
                }
              },
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: seriesArr
      });
      window.addEventListener("resize", function() {
        charts.resize();
      });
    },
  },
  mounted() {
    this.$nextTick(function() {
      this.draw_line();
    });
  },
};
</script>

<style scoped>
.lineChart {
  width: 100%;
  height: 100%;
  /* width: 300px; */
}
</style>
